<template>
    <div class="maindataPeopleNumber">
      <el-row class="one_row">
        <el-form :model="requestParam"
                 label-width="140px">
          <el-col :span="6">
            <el-form-item label="姓名">
              <el-input v-model="requestParam.DESC1"
                        placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="所属行政组织">
              <el-input v-model="requestParam.DESC35"
                        placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="手机号">
              <el-input type="tel" v-model="requestParam.DESC76"
                        placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="绑定状态">
                <el-select v-model="requestParam.value" placeholder="请选择" >
                 <el-option
                v-for="item in requestParam.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
             </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-row  class="two_row">
        <el-form :model="requestParam"
                 label-width="140px">
          <el-col :span="6" class="time">
              <el-form-item label="创建时间">
                <el-date-picker
                is-range
                v-model="requestParam.timeValue"
                type="datetimerange"
                format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
              </el-date-picker>
            </el-form-item>
          </el-col>      
        </el-form>
      </el-row>
      <el-row class="three_row">
        <el-col :span="6">
            <div>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="reset">重置</el-button>
          </div>
      </el-col>
      </el-row>
      <el-table :highlight-current-row="true"
                border
                :header-cell-style="{ background: '#f5f5f5' }"
                :data="tableData.list"
                height="610px">
        <el-table-column prop="serial_number"
                         label="序号"
                         align="center"
                         width="100px"
                         type="index"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="DESC1"
                         label="姓名"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="DESC37"
                         label="上级部门"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="DESC35"
                         label="所属行政组织"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="DESC76"
                         label="手机号"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="DESC33"
                         label="岗位"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="bind_status"
                         label="绑定状态"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="create_at"
                         label="同步时间"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <el-pagination @current-change="handlePageChange"
                     @size-change="handleSizeChange"
                     :current-page="requestParam.page"
                     :page-size="requestParam.page_size"
                     layout="total,sizes,prev, pager, next, jumper"
                     background
                     :total="tableData.total_count"
                     align="center">
      </el-pagination>
    </div>
  </template>
  
  <script>
   import { BulkManageApi } from "@/services/ResourceCentre";
  export default {
    components: {
  
    },
    data () {
      return {
        requestParam: {
          DESC1:'',
          DESC35:'',
          DESC76:'',
          timeValue:'',
          bind_status:'',
          RECORDTIME_start:'',
          RECORDTIME_end:'',
          is_page: 1,
          page: 1,
          page_size: 10,       
          options: [{
          value: '-1',
          label: '全部'
        }, {
          value: '1',
          label: '是'
        }, {
          value: '0',
          label: '否'
        }],
        value:'全部',
        },
        resetParam: {
          DESC1:'',
          DESC35:'',
          DESC76:'',
          timeValue:'',
          bind_status:'',
          RECORDTIME_start:'',
          RECORDTIME_end:'',
          is_page: 1,
          page: 1,
          page_size: 10,       
          options: [{
          value: '-1',
          label: '全部'
        }, {
          value: '1',
          label: '是'
        }, {
          value: '0',
          label: '否'
        }],
        value:'全部',
        },
        tableData: {
          list: [],
          page: 1,
          total_count: 0
        }
      };
    },
    methods: {
      // 查询
      search () {
        this.requestParam.page = 1
        this.getData()
      },
      // 重置
      reset () {
        let resetParam = JSON.parse(JSON.stringify(this.resetParam));
        this.requestParam = Object.assign(this.requestParam, resetParam);
        this.getData()
      },
      handlePageChange (page) {
        this.requestParam.page = page,
        this.getData()
      },
      // 当前页多少数据
      handleSizeChange(page_size){
        this.requestParam.page_size= page_size,
        this.getData()
      },
      // 将标准时间转化为2022-12-08 02:02:10
      timeInvert(time){
        for(let i=0;i<time.length;i++){
          let date2 = new Date(time[i]);
          // 获取年
          let year = date2.getFullYear();
          // 获取月
          let mon = date2.getMonth() + 1;
          if(mon<10){
            mon='0'+mon
          }
          // 获取日
          let day = date2.getDate();
          if(day<10){
            day='0'+day
          }
          // 获取小时
          let hours = date2.getHours();
          if(hours<10){
            hours='0'+hours
          }
          console.log(hours);
          // 获取分钟
          let min = date2.getMinutes();
          if(min<10){
            min='0'+min
          }
          console.log(min);
          // 获取秒
          let sec = date2.getSeconds();
          if(sec<10){
            sec='0'+sec
          }
          let times = year + "-" + mon + "-" + day+" "+ hours + ":" + min + ":" + sec;
            if(i==0){
              this.requestParam.RECORDTIME_start=times;
            }else{
              this.requestParam.RECORDTIME_end=times;
            }
            console.log(times);
          }
      },
      getData () {
         // 判断绑定状态
        if(this.requestParam.value==0||this.requestParam.value==1){
          this.requestParam.bind_status=this.requestParam.value
        }else{
          this.requestParam.bind_status=''
        }
        // 判断存放开始结束时间的timeValue是否为空
        if(!this.requestParam.timeValue){
          this.requestParam.RECORDTIME_start='';
          this.requestParam.RECORDTIME_end='';
        }else{
          this.timeInvert(this.requestParam.timeValue)
        }
        BulkManageApi.getMainDataPeopleNumber({
          params:{
            is_page:this.requestParam.is_page,
            page_size:this.requestParam.page_size,
            page:this.requestParam.page,
            DESC1:this.requestParam.DESC1,
            DESC35:this.requestParam.DESC35,
            DESC76:this.requestParam.DESC76,
            bind_status:this.requestParam.bind_status,
            RECORDTIME_start:this.requestParam.RECORDTIME_start,
            RECORDTIME_end:this.requestParam.RECORDTIME_end
          }
        }).then(res => {
          if (res.code === 0) {
            for(let i=0;i< res.data.list.length;i++){
            if(res.data.list[i].bind_status==0){
              res.data.list[i].bind_status="否"
            }else{
              res.data.list[i].bind_status="是"
            }
          }
          this.tableData = res.data
          }
        })
        console.log(this.tableData);
      },
    },
    created () {
  
    },
    mounted () {
        this.getData()
    },
  };
  </script>
  
  <style scoped lang="scss" >
   /deep/ .el-range-separator{
    width: 12% !important;
}
/deep/  .el-date-editor--datetimerange.el-input__inner{
    width: 258px!important;
  }
  .maindataPeopleNumber{
      width: 100%;
      padding: 20px;
      .two_row .el-form .time .el-form-item .el-form-item__content {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .el-input{
            width: 80px;
            height: 100%;
        }
      }
      .three_row{
          width: 100%;
          margin-bottom: 20px;
          .el-col{
              width: 100%;
              display: flex;
              justify-content:flex-end;
              align-items: center;
          }
         
      }
  }
  
  </style>
  